{/* Copyright 2020 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License. */}

import {Layout} from '@react-spectrum/docs';
export default Layout;

import docs from 'docs:@react-spectrum/icon';
import {HeaderInfo, PropTable} from '@react-spectrum/docs';
import packageData from '@react-spectrum/icon/package.json';
import workflowIconPackageData from '@spectrum-icons/workflow/package.json';

```jsx import
import {Flex} from '@react-spectrum/layout';
```

---
category: Icons
---

# Workflow Icons

Workflow icons are graphical metaphors or symbols that can be used to compliment existing experiences.

<HeaderInfo
  packageData={workflowIconPackageData}
  sourceData={[
    {type: 'Spectrum', url: 'https://spectrum.adobe.com/page/iconography/'}
  ]} />

## Example

```tsx example
import Airplane from '@spectrum-icons/workflow/Airplane';

<Airplane aria-label="Airplane" />
```

## Sizing

Icons support t-shirt sizing. When used inside another React Spectrum component, they'll generally be sized automatically,
but if you use icons standalone, you can use the `size` prop to control the sizing. The default size is "M" in medium scale
(desktop), and "L" in large scale (mobile).

```tsx example
import Beaker from '@spectrum-icons/workflow/Beaker';

<Flex gap="size-100">
  <Beaker aria-label="XXS Beaker" size="XXS" />
  <Beaker aria-label="XS Beaker" size="XS" />
  <Beaker aria-label="S Beaker" size="S" />
  <Beaker aria-label="M Beaker" size="M" />
  <Beaker aria-label="L Beaker" size="L" />
  <Beaker aria-label="XL Beaker" size="XL" />
  <Beaker aria-label="XXL Beaker" size="XXL" />
</Flex>
```

## Coloring

Icons support four Spectrum semantic colors: `negative`, `notice`, `positive`, and `informative`. Icons within React Spectrum components typically
have their colors styled appropriately, but you can use the `color` prop to adjust the color of any standalone icons.

```tsx example
import Alert from '@spectrum-icons/workflow/Alert';

<Flex gap="size-100">
  <Alert aria-label="Default Alert" />
  <Alert aria-label="Negative Alert" color="negative" />
  <Alert aria-label="Notification Alert" color="notice" />
  <Alert aria-label="Positive Alert" color="positive" />
  <Alert aria-label="Informative Alert" color="informative" />
</Flex>
```

## Labeling

By default, icons are considered decorative, and are hidden from assistive technology. When used within a component like a button
that has no label, an `aria-label` should be provided to the parent component. If used standalone, an `aria-label` can be provided
to the icon itself.

```tsx example
import LockClosed from '@spectrum-icons/workflow/LockClosed';

<LockClosed aria-label="Locked" />
```

## Available Icons

A [searchable list of workflow icons](https://spectrum.adobe.com/page/icons/) is available on the Spectrum website.
The name of the icon without any whitespace matches the import in React Spectrum.

**Note**: The Workflow icons we ship should not be wrapped in an `Icon` component like [Custom Icons](custom-icons.html), they are already wrapped.
